<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 指定字符集 -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>用户信息管理系统</title>
    <!-- 1. 导入CSS的全局样式 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
    <script src="js/jquery-2.1.0.min.js"></script>
    <!-- 3. 导入bootstrap的js文件 -->
    <!-- <script src="js/bootstrap.min.js"></script>-->
    <style type="text/css">
        td, th {
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
    <h3 style="text-align: center;margin-bottom: 50px;">用户信息列表</h3>
    <div style="float: left;">
    </div>
    <div style="float: right;margin-bottom: 15px">
        <a class="btn btn-primary" href="add.html">添加用户</a>
    </div>
    <table border="1" class="table table-bordered table-hover">
        <tr class="success">
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>籍贯</th>
            <th>QQ</th>
            <th>邮箱</th>
            <th>超管</th>
            <th>操作</th>
        </tr>
        <tbody id="info">
                
        </tbody>
    </table>

</div>
<script>
    let parent = document.querySelector("#info");
        $.ajax({
            url:"user/listAll",
            type:"get",
            success: function(data){
                console.log("进入 success 函数" + data.status)
                buildBlogs(data.body);
            },
            // error: function(data,status){
            //     console.log("进入error函数" + status);
            //     location.assign("login.html");
            // }
        })
        //根据响应中的数据,构造html
        function buildBlogs(data){
            //遍历这个data
            for(let blog of data){
                //blog就是一个json对象
                // let blogId = document.createElement("div");
                // blogId.innerHTML = blog.blogId;
                // parent.appendChild(blogId);
                let tr = document.createElement("tr");
                parent.appendChild(tr);
                let name = document.createElement("th");
                name.innerHTML = blog.name;
                tr.appendChild(name);
                let sex = document.createElement("th");
                sex.innerHTML = blog.sex;
                tr.appendChild(sex);
                let age = document.createElement("th");
                age.innerHTML = blog.age;
                tr.appendChild(age);
                let address = document.createElement("th");
                address.innerHTML = blog.address;
                tr.appendChild(address);
                let qq = document.createElement("th");
                qq.innerHTML = blog.qq;
                tr.appendChild(qq);
                let email = document.createElement("th");
                email.innerHTML = blog.email;
                tr.appendChild(email);
                let isadmin = document.createElement("th");
                if(blog.isadmin == 1){
                    isadmin.innerHTML = "是";
                }else{
                    isadmin.innerHTML = "否";
                }
                tr.appendChild(isadmin);
                let operate = document.createElement("th");
                tr.appendChild(operate);
                let a1 = document.createElement("a");
                a1.innerHTML = "修改";
                a1.className = "btn btn-default btn-sm";
                a1.href = "update.html?id=" + blog.id;
                operate.appendChild(a1);
                let a2 = document.createElement("a");
                a2.innerHTML = "删除";
                a2.className = "btn btn-default btn-sm";
                // 
                a2.href ="#";
                a2.onclick = drop;
                operate.appendChild(a2);
        function drop(){
            $.ajax({
                url:"user/delete?id=" + blog.id,
                type:"get",
                success: function(data,status){
                    if(data.body == 1){
                        alert("删除成功");
                        location.assign("login.html");
                    }else{
                        alert("你的想法更危险啊,不能删除他人信息");
                    }
                }
            })
        }
            }
        }
</script>
</body>

</html>
